import { h } from "preact";
import { JSX } from "preact";

export interface ButtonProps {
  children?: JSX.Element | JSX.Element[] | string;
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
  href?: string;
  onClick?: () => void;
  disabled?: boolean;
  type?: "button" | "submit" | "reset";
  className?: string;
  full?: boolean;
  glow?: boolean;
}

export default function Button({
  children,
  variant = "primary",
  size = "md",
  href,
  onClick,
  disabled = false,
  type = "button",
  className = "",
  full = false,
  glow = false,
}: ButtonProps) {
  // Button style variants
  const variants = {
    primary: "bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-400 shadow-md hover:shadow-lg focus:ring-offset-2 focus:ring-offset-surface-900 border border-primary-600",
    secondary: "bg-surface-700 text-white hover:bg-surface-600 focus:ring-surface-600 shadow hover:shadow-md focus:ring-offset-2 focus:ring-offset-surface-900 border border-surface-700",
    outline: "bg-transparent text-surface-200 border border-surface-600 hover:border-primary-500 hover:text-primary-300 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-surface-900",
    ghost: "bg-transparent text-surface-300 hover:bg-surface-700/50 hover:text-surface-100 focus:ring-surface-600 focus:ring-offset-1 focus:ring-offset-surface-900"
  };
  
  // Button size variants
  const sizes = {
    sm: "text-xs px-3 py-1.5 rounded-lg",
    md: "text-sm px-4 py-2 rounded-lg",
    lg: "text-base px-6 py-3 rounded-xl"
  };
  
  const baseClasses = `inline-flex items-center justify-center transition-all duration-200 font-medium focus:outline-none focus:ring-2 ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:-translate-y-px active:translate-y-0'} ${full ? 'w-full' : ''}`;
  const glowClass = glow ? 'glow-effect' : '';
  const buttonClasses = `${baseClasses} ${variants[variant]} ${sizes[size]} ${glowClass} ${className}`;
  
  // If href is provided, render as an anchor tag
  if (href) {
    return (
      <a href={href} className={buttonClasses}>
        <span className="relative z-10">{children}</span>
      </a>
    );
  }
  
  // Otherwise, render as a button
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={buttonClasses}
    >
      <span className="relative z-10">{children}</span>
    </button>
  );
} 